<template>
  <div id="app">
    <!-- 放一个坑 ,用来承载路径匹配到的路由组件 -->
    <RouterView />

    <h1>我是 App</h1>

    <!-- 
      声明式导航 使用 name 的跳转  :to="{ name: 'xxx' }"
     -->

    <RouterLink to="/home">首页</RouterLink>
    <RouterLink :to="{ name: 'abc' }">首页</RouterLink>
    <RouterLink :to="{ name: 'about' }">关于页面</RouterLink>

    <!-- 
      编程式导航 使用 name 的跳转 { name: 'xxx' }
     -->
    <button @click="$router.push('/home')">首页</button>
    <button @click="$router.push({ name: 'abc' })">首页</button>
    <button @click="$router.replace({ name: 'about' })">关于页面</button>
  </div>
</template>

<script>
export default {
  name: "App",

  created() {
    console.log(this);
  },
};
</script>

<style>
.router-link-active {
  color: red;
}
</style>
